<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>echart_柱形折线图2</title>
    <style>
        #echart1 {
            height: 600px;
            width: 800px;
            margin-left: 60px;
            margin-top: 60px;
        }
    </style>
</head>

<body>
    <div id="echart1"></div>
</body>
<script src="./js/jquery.min.js"></script>
<script src="./js/echarts.min.js"></script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('echart1'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '动态数据',
            subtext: '纯属虚构'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#283b56'
                }
            }
        },
        legend: {
            data: ['最新成交价', '预购队列']
        },
        toolbox: {
            show: true,
            feature: {
                dataView: {
                    readOnly: false
                },
                restore: {},
                saveAsImage: {}
            }
        },
        dataZoom: {
            show: false,
            start: 0,
            end: 100
        },
        xAxis: [{
            type: 'category',
            boundaryGap: true,
            data: (function() {
                var now = new Date();
                var res = [];
                var len = 10;
                while (len--) {
                    res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''));
                    now = new Date(now - 2000);
                }
                return res;
            })()
        }, {
            type: 'category',
            boundaryGap: true,
            show: false,
            data: (function() {
                var res = [];
                var len = 10;
                while (len--) {
                    res.push(10 - len - 1);
                }
                return res;
            })()
        }],
        yAxis: [{
            type: 'value',
            scale: true,
            name: '价格',
            min: 0,
            boundaryGap: [0.2, 0.2]
        }, {
            type: 'value',
            scale: true,
            name: '预购量',
            min: 0,
            boundaryGap: [0.2, 0.2]
        }],
        series: [{
            name: '预购队列',
            type: 'bar',
            xAxisIndex: 1,
            yAxisIndex: 1,
            data: (function() {
                var res = [];
                var len = 10;
                while (len--) {
                    res.push(Math.round(Math.random() * 1000));
                }
                return res;
            })()
        }, {
            name: '最新成交价',
            type: 'line',
            data: (function() {
                var res = [];
                var len = 0;
                while (len < 10) {
                    res.push((Math.random() * 10 + 5).toFixed(1) - 0);
                    len++;
                }
                return res;
            })()
        }]
    };

    var count = 11;
    // setInterval(function() {
    var axisData = (new Date()).toLocaleTimeString().replace(/^\D*/, '');

    var data0 = option.series[0].data;
    console.log('data0', data0)
    var data1 = option.series[1].data;
    console.log('data1', data1)
    data0.shift();
    data0.push(Math.round(Math.random() * 1000));
    data1.shift();
    data1.push((Math.random() * 10 + 5).toFixed(1) - 0);
    console.log('data01', data0)
    console.log('data11', data1)

    option.xAxis[0].data.shift();
    option.xAxis[0].data.push(axisData);
    option.xAxis[1].data.shift();
    option.xAxis[1].data.push(count++);

    myChart.setOption(option);
    // }, 2100);

    // 使用刚指定的配置项和数据显示图表。
</script>

</html>